<script lang="ts" setup>
import { ref } from "vue";
import { useRoute } from "vue-router";
import { getColumnDetail } from "@/api/api";
import PostList from "@/components/PostList.vue";
import ColumnIntro from "@/components/ColumnIntro.vue";

    const column = ref({});
    const route = useRoute(); // route的信息
    const columnid = route.params.id; // 变成字符串

    getColumnDetail(columnid).then((res) => {
      column.value = res;
      console.log("getColumnDetail", res);
    });

</script>

<template>
  <article class="container2" v-if="JSON.stringify(column) !== '{}'">
    <!-- 专栏信息 -->
    <ColumnIntro :column="column" class="colunm-intro"></ColumnIntro>
    <!-- 文章列表 -->
    <PostList></PostList>
  </article>
</template>

<style lang="scss" scoped>
.colunm-intro {
  margin: 0;
}
.box {
  margin: 0 auto;
  width: 1000px;
}
.column {
  margin-bottom: 20px;
}
</style>
